<template>
  <div class="h100">
    <!--  -->
    <avue-crud
      :option="option"
      :data="data"
      @search-change="searchChange"
      @search-reset="resetChange"
    >
      <template #menu="{ size, row, index }">
        <!-- row 每一行的内容 -->
        <el-button @click="tip(row, index)" text type="primary" :size="size"
          >进入对话</el-button
        >
      </template>
      <template #img="scoped">
        <img class="img" :src="scoped.row.img" alt="" />
      </template>
      <template #talk="scoped">
        <el-space>
          <el-tag
            v-for="(item, index) in scoped.row.talk"
            :type="tagStyle[Math.round(Math.random() * 5)]"
            :key="index"
          >
            {{ item }}
          </el-tag>
        </el-space>
      </template>
    </avue-crud>

    <!-- 抽屉 -->
    <el-drawer v-model="drawer" title="I'm outer Drawer" size="50%">
      <template #header="{ close, titleId, titleClass }">
        <h3>
          {{ talkInof.name }} &nbsp
          <span class="span"> 机器人ID：{{ talkInof.id }} </span>
        </h3>
      </template>
      <div>
        <el-space>
          <el-tag
            v-for="(item, index) in talkInof.talk"
            :type="tagStyle[Math.round(Math.random() * 5)]"
            :key="index"
          >
            {{ item }}
          </el-tag>
        </el-space>
      </div>
      <div class="box">
        <div class="context">
          <ul class="oul">
            <li
              :class="['oli', index % 2 === 0 ? 'right' : 'left']"
              v-for="(item, index) in filterList"
              :key="index"
            >
              <img v-if="index % 2 === 0? false: true" class="touxiang" :src="talkInof.img" alt="">
              <span :class="['span_context', index % 2 === 0?'':'left_context']">
                {{ item.context }}
              </span>
            </li>
          </ul>
        </div>
        <div class="bottom">
          <div class="bottom_top">
            <el-space>
              <el-button>重置对话</el-button>
              <el-button>清空聊天</el-button>
            </el-space>
          </div>
          <div>
            <el-input v-model="textarea" @change="change" class="ipt" />
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import axios from "@/http";
import { ref, reactive } from "vue";
import { msgTalk, getTalkList } from "@/api/talk";
// 客服列表
const data = ref([]);

const dataList = await getTalkList();
data.value = dataList.data.data;

// 自定义tag样式
const tagStyle = ["success", "info", "warning", "danger", ""];

const option = ref({
  menuWidth: 380,
  column: [
    {
      label: "客服名称",
      prop: "name",
      // 开启搜索
      search: true,
    },
    {
      label: "客服头像",
      prop: "img",
    },
    {
      label: "客服技能",
      prop: "talk",
    },
  ],
});

const resetChange = (item) => {
  this.$message.success("清空回调");
};

const searchChange = (params, done) => {
  this.$message.success("2s后关闭锁定");
  setTimeout(() => {
    done();
    this.$message.success(JSON.stringify(params));
  }, 2000);
};

const drawer = ref(false);

const handleClose = (done) => {
  ElMessageBox.confirm("You still have unsaved data, proceed?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

// 进入聊天事件
const talkInof = ref({});
const textarea = ref("");
const list = ref([]);
const filterList = ref([])
const tip = (row) => {
  drawer.value = true;
  talkInof.value = row;
  filterList.value = list.value.filter(item => item.id === talkInof.value.id)
};

const change = () => {
  msgTalk(textarea.value, talkInof.value.id).then((res) => {
    const arr = []
    res.data.result.forEach(item => {
      arr.push({
        // 机器人id
        id: talkInof.value.id,
        context: item
      })
    })
    list.value = list.value.concat(arr);
    filterList.value = list.value.filter(item => item.id == talkInof.value.id)
    textarea.value = "";
  });
};

</script>
<style scoped>
.span {
  font-weight: 500;
  font-size: 14px;
}

.box {
  height: 93%;
  display: flex;
  flex-direction: column;
}

.context {
  flex: 1;
}

.span_context {
  margin-left: 10px;
  background: #2196f3ba;
  padding: 10px;
  border-radius: 10px;
  color: #fff;
}

.left_context {
  background: #eee !important;
  color: #000 !important;
}
.bottom {
  height: 100px;
  border-top: 2px solid #eee;
}

.bottom_top {
  margin-top: 15px;
}

.ipt {
  margin-top: 10px;
  min-height: 40px;
  border: none !important;
}

.img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.touxiang {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  position: relative;

  top: 15px;
}

.oli {
  min-height: 40px;
}

.oul {
  position: relative;
  height: 100%;
}

.right {
  text-align: right;
}

.left {
  margin-top: 10px;
}
</style>
